class Main extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name: '珍珍',
            index: 1,
            topprice: 158,
            secondprice: 128,
            trdprice: 98,
            sizehtml: [],
            level: 'GJ',
            showxuzhi: !0,
            sizeid: '',
            // preview:'./src/girl2.jpg',
            dongtailist: [
                {
                    imglist: ['./src/girl1.jpg', './src/girl2.jpg', './src/girl3.jpg'],
                    word: '小辣一下',
                    pingluncount: 1,
                },
            ],
            cphnum: 1,
            showpreview: !1,
            xdxz: `尊敬的用户，欢迎您通过趣秒搭向服务提供方购买服务项目，但您下单前，请仔细阅读以下须知: 
  1.趣秒搭并非您所选择服务的提供者，趣秒搭仅依照《用户协议》等的约走向您展示其服务项目的自然人或个体工商户的有关信息。
  2.服务提供者对于不正当、不合理的行为和要求，有权拒绝服务，如肢体接触、言语侮辱、劝酒等行为，服务提供者及相关方将保留追究有关人员法律责任，且该订单金额概不退还。
  3.服务提供者未接单或者未出发，客户取消订单，趣秒搭将协调服务提供方全额退款.
  4.服务提供者出发后服务开始前，因客户原因取清订单客户需支付服务提供者往返车费，并以50元作为率单费补偿。`,
            cate: 'FW',
            introduce: `本人擅长提供情绪价值，陪你聊天、玩游戏、分享心事。无论是想放松心情还是寻找共鸣我都会用心倾听 给你最贴心的陪伴 如果你需要有人陪你度过无聊的时光，或者想要一个懂你情绪的朋友，那我就是你的不二选择!`,
            xuzhi: `预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知
            预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知
            预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知
            预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知`,
            poster: './src/peizhen.png',
            amount: 835,
            page: 1,
            price: 825,
            list: [
                {
                    name: '陪诊',
                    people: 20,
                    price: 120,
                    src: 'peizhen',
                },
                {
                    name: '探店达人',
                    people: 20,
                    price: 69,
                    src: 'tandian',
                },
                {
                    name: '陪拍',
                    people: 20,
                    price: 108,
                    src: 'peipai',
                },
            ],
            rid: 0,
            cpid: 1,
            keyword: '',
            JX: '安卓',
            serverinput: '',


            isall: !1
        };
    }









    componentDidMount() {
        if (Constant.SWITCH_VCONSOLE) {
            new VConsole();
        }

        let openid = localStorage.getItem('openid'), id = GetQueryString('id');


    }







    inputbz(e) {
        this.setState({ desc: e.target.value })
    }

    clear() {
        var b = confirm('确定要清空吗')
        if (b) {
            localStorage.removeItem('orderlist')
            this.setState({ list: [], desc: '', amount: 0 })
        }
    }

    gopay() {
        let { sizeid, openid } = this.state;
        if (sizeid == '' || sizeid == '请选择') {
            alert('请先选择尺寸')
        } else {

            canbuy(openid, res => {
                if (res.data == true) {
                    this.pay(sizeid)
                } else {
                    alert('请勿重复购买')
                }

            })
            // 
        }

    }

    selectchange(e) {
        let { value } = e.target
        this.setState({ sizeid: value })
    }

    selectchange1(e) {
        let { value } = e.target, { amount, allprice } = this.state;
        if (value == 0) {
            amount = 610
        } if (value == -1) {
            amount = 300
        } if (value == 1) {
            amount = 835
        }
        this.setState({ cpid: value, amount })
    }

    clickcate(name) {
        let { index } = this.state
        if (index != name) {
            this.setState({ index: name })
        }
    }
    xiadan(e) {

    }


    render() {
        let { xdxz, poster, showxuzhi, list, preview, showpreview, index, dongtailist, xuzhi, introduce, level, name, topprice, secondprice, trdprice } = this.state;
        return (
            <div id="app">
                <div onClick={() => {
                    this.setState({ showpreview: !1 })
                }} className="preview" style={{ display: showpreview == !0 ? '' : 'none' }} >
                    <div className="mask"></div>
                    <img src={preview} alt="" />

                </div>

                <div onClick={() => {
                    this.setState({ showxuzhi: !1 })
                }} className="xuzhiview" style={{ display: showxuzhi == !0 ? '' : 'none' }} >
                    <div className="mask"></div>
                    <div className="wrap">
                        <p className="title">下单须知</p>
                        <span className="contents">
                            {xdxz}
                        </span>
                        <div className="btns">
                            <p onClick={() => {
                                this.setState({ showxuzhi: !1 })
                            }} className="qx">取消</p>
                            <p >同意</p>
                        </div>
                    </div>
                </div>


                <div className="topinfo">
                    <div>
                        <img src="./src/girl1.jpg" alt="" />
                        <p>{name}</p>
                        <p className={`level ${level}`}>{level == 'GJ' ? '高级' : level == 'ZJ' ? '中级' : '初级'}达人</p>
                        <p className="shiming">实名认证</p>
                    </div>
                    <div className="guanzhu">关注</div>
                </div>
                <div className="poster ">
                    <img src={poster} alt="" />
                </div>
                <div className="content">
                    <div className="name">{name}</div>
                    <div className="items">

                        <div className="item">
                            <div className="d1 cj">
                                <img src="./src/tongpai.png" alt="" />
                                <p>初级达人</p>
                            </div>
                            <p>￥{trdprice}/60分钟</p>
                        </div>
                        <div className="item">
                            <div className="d1 zj">
                                <img src="./src/yinpai.png" alt="" />
                                <p>中级达人</p>
                            </div>
                            <p>￥{secondprice}/60分钟</p>
                        </div>

                        <div className="item">
                            <div className="d1 gj">
                                <img src="./src/jinpai.png" alt="" />
                                <p>高级达人</p>
                            </div>
                            <p>￥{topprice}/60分钟</p>
                        </div>
                    </div>
                </div>


                <div className="maincontent">
                    <div className="cate">
                        <p onClick={this.clickcate.bind(this, '0')} className={index == '0' ? 'c' : ''}>提供项目</p>
                        <p onClick={this.clickcate.bind(this, '1')} className={index == '1' ? 'c' : ''}>TA的介绍</p>
                        <p onClick={this.clickcate.bind(this, '2')} className={index == '2' ? 'c' : ''}>TA的动态</p>
                        <p onClick={this.clickcate.bind(this, '3')} className={index == '3' ? 'c' : ''}>客户评价</p>
                    </div>
                    <div className="content">
                        {
                            index == 1 ? <p>{introduce}</p> :
                                index == 0 ?
                                    <div className="list">
                                        {
                                            list.map((x, i) => {
                                                return (
                                                    <div onClick={this.xiadan.bind(this, x.id)} className="item">
                                                        <div className="left">
                                                            <img src={`./src/${x.src}.png`} alt="" />
                                                            <div className="middle">
                                                                <p className="p1">{x.name}</p>
                                                                <div className="price"><p>{x.price}</p>/元小时起</div>
                                                            </div>
                                                        </div>
                                                        <div className="last">
                                                            <div className="xuanze">
                                                                <img src="./src/fire.png" alt="" />
                                                                <p>超{x.people}人选择</p>
                                                            </div>
                                                            <div className="xiadan">去下单</div>
                                                        </div>
                                                    </div>
                                                )
                                            })
                                        }

                                    </div>
                                    :
                                    index == 2 ?
                                        <div className="dongtailist">
                                            {
                                                dongtailist.map((x, i) => {
                                                    return (
                                                        <div className="item">
                                                            <p>{x.word}</p>
                                                            <div style={{ display: x.imglist.length > 0 ? '' : 'none' }} className="imglist">
                                                                {x.imglist.map((x, i) => {
                                                                    return (
                                                                        <img onClick={() => {
                                                                            console.log(x, 'img---x');
                                                                            this.setState({ preview: x, showpreview: !0 })
                                                                        }} src={x} />
                                                                    )

                                                                })
                                                                }
                                                            </div>

                                                        </div>)

                                                })

                                            }

                                        </div>



                                        : ''
                        }



                    </div>
                    {/* <div style={{display:index==0?'':'none'}} className="content">
                   
                       
                    </div> */}
                    <div style={{ display: index == 0 ? '' : 'none' }} className="content">

                    </div>

                </div>

                {/* <div onClick={()=>{window.location.href='./friend.html'}} className="btn">预约</div> */}


            </div>
        )
    }
}

ReactDOM.render(
    <div>
        {/* <TopLine /> */}
        <div id='body'>
            {/* <Tabbar index='0' /> */}
            <Main />
        </div>
    </div>
    // <Barrage />
    , $('.container')[0]
)